<template>
  <el-scrollbar class="container">
    <!-- 搜索框 -->
    <div class="flex">
      <div class="">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <el-button
        v-blur
        class="ml15"
        :icon="Search"
        type="primary"
        plain
        @click="handleSearch">
        搜索
      </el-button>
    </div>
    <Tab
      :data="tabData"
      class="mt15"
      @handle-tab="handleTab" />
    <SolidBorder class="mt15 eh">
      <LinesEcharts
        :options="options"
        class="h100" />
    </SolidBorder>
    <SortTable class="st-h" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Tab from '@/components/Tab/index.vue'
import type { ITab } from '@/types/tab'
import SolidBorder from '@/components/SolidBorder/index.vue'
import LinesEcharts from '@/components/Echarts/lines.vue'
import { getOptions } from './options'
import SortTable from '@/components/SortTable/index.vue'

const dateRange = ref<[Date, Date]>()
const tabId = ref<string>()
const handleTab = (id: string) => {
  tabId.value = id
}
const handleSearch = () => {
  console.log('dateRange：', toRaw(dateRange.value))
}
const tabData: ITab[] = [
  { text: '日发电量', id: '1' },
  { text: '电流', id: '2' },
  { text: '电压', id: '3' },
  { text: '汇流箱功率', id: '4' }
]
const options = reactive(
  getOptions({
    name: '单位：A',
    lengend: [{ name: 'pv1' }],
    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      {
        name: 'pv1',
        type: 'line',
        smooth: true,
        markPoint: {
          data: [
            { type: 'max', name: 'max', label: { color: '#fff' } },
            { type: 'min', name: 'min', label: { color: '#fff' } }
          ]
        },
        data: [120, 932, 901, 934, 1290, 1330, 1320]
      }
      // { name: 'pv2', type: 'line', data: [220, 832, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv3', type: 'line', data: [320, 732, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv4', type: 'line', data: [420, 632, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv5', type: 'line', data: [520, 942, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv6', type: 'line', data: [620, 972, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv7', type: 'line', data: [720, 982, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv8', type: 'line', data: [820, 912, 901, 934, 1290, 1330, 1320] },
      // { name: 'pv9', type: 'line', data: [920, 922, 901, 934, 1290, 1330, 1320] }
    ]
  })
)
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
.container {
  height: calc(100vh - 6.9rem);
  width: 100%;
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.h444 {
  height: 44.4rem;
}
.eh {
  height: calc(100vh - 6.9rem - 20rem - 3rem - 6rem - 70px);
}
.h100 {
  height: 100%;
}
.st-h {
  height: 20rem;
  // padding: 1.5rem;
  box-sizing: border-box;
}
:deep(.el-input__wrapper) {
  background: transparent;
}
:deep(.el-range-input) {
  --el-text-color-regular: $color;
}
:deep(.el-range-separator) {
  --el-text-color-primary: $color;
}
:deep(.el-table) {
  --el-table-border: 1px solid #148285;
  --el-table-bg-color: transparent;
  --el-table-text-color: $color;
  --el-table-header-bg-color: rgba($primary_color, 30%);
  --el-table-tr-bg-color: rgba($primary_color, 30%);
  --el-table-header-text-color: $color;
  --el-text-color-secondary: $color;
  --el-table-border-color: transparent;
  border: var(--el-table-border);
}
:deep(.el-button) {
  background: transparent;
}
</style>
